<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户界面</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <script src="./js/prop.js"></script>
</head>
<body>
<div class="container-fluid">
    <header class="row">
            <div class="col">餐厅点餐系统</div>
            <div class="col-1"><img id="header_url" alt="头像"></div>
            <div class="col-3" id="message"></div>
            <div class="col-3" id="now"></div>
            <div class="col-1"><button id="logout">退出</button></div>
    </header>
    <main class="container__main">
        <!-- 导航栏 -->
        <aside id="menu" class="container__left"></aside>

        <!-- 页面 -->
        <article class="container__middle"></article>
    </main>
</div>
</body>
</html>

<!--JS代码-->
<script>
    $(() => {
        // 获取本地cookie 登录凭证
        let url = yun + 'user/details';
        let data = {id: $.cookie('userId')};
        $.get(url, data, function(message) {
            console.log(message);
            // 响应失败进入登录页面重新登录

            // 响应正常进入下面的逻辑
            let data = message.data;
            // 加载头像
            $('#header_url').attr('src', data.headerUrl);
            // 写入身份和名字
            let identity = menuItem[data.type].type;
            $('#message').text(`欢迎你，${identity}${data.username}`);
            IntoMenu(data.type);
        })
    });

    // 显示时间
    window.setInterval(() => {
        $('#now').text(getNow());
    }, 1000);

    // 退出登录
    $('#logout').click(() => {
        // 删除cookie 跳转到index.html重定向
        $.removeCookie('userId', { expires: 7, path: yun });
        window.location.assign('./index.html');
    });

    // 加载菜单
    function IntoMenu(type) {
        $.each(menuItem[type].item, (id, elem) => {
            console.log(elem.name, elem.url);
            $('#menu').append(`<a href="${elem.url}">${elem.name}<a><br>`);
        });
    }

</script>

<!--CSS代码-->
<style>
    #header_url {
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }

    header {
        background-color: yellow;
    }

    .container__main {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
    }

    .container__left {
        width: 25%;
        background-color: antiquewhite;
    }

    .container__middle {
        width: 75%;
        background-color: aqua;
    }
</style>